<template>
  <div class="wapper quality_check_template_table">
    <div class="tool">
      <div class="add-wapper">
        <el-button class="primary_btn add_btn" type="text" @click.stop="changeAddTemp('addScoring')" icon="el-icon-plus">{{$t('configLazyLoad.qualityCheck.addScoringTemplate')}}</el-button>
        <el-button class="primary_btn add_btn" type="text" @click.stop="changeAddTemp('addPass')" icon="el-icon-plus">{{$t('configLazyLoad.qualityCheck.addPassTemplate')}}</el-button>
      </div>
      <div class="pag-wapper">
        <pagination
        :small="true"
        :currentPage="trunPage"
        :count="count"
        @turnPage="trunPages"
        :totalPage="Math.ceil(count/10)"
        >
       </pagination>
      </div>
    </div>
    <div class="table-wapper">
        <el-table
        highlight-current-row
        size="mini"
        stripe
        :data="tableData"
        style="width: 100%">
        <el-table-column
          :label="$t('qualityCheck.templateName')"
          show-overflow-tooltip>
          <template scope="scope"
          >
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.qualityCheck.tempType')"
          width="90">
          <template scope="scope">
            {{ scope.row.type === 'pass' ? $t('configLazyLoad.qualityCheck.passTemplate') : $t('configLazyLoad.qualityCheck.scoringTemplate') }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.qualityCheck.lastOperator')"
          show-overflow-tooltip>
          <template scope="scope">
            <agent
            :id="scope.row.updateUser"
            isNum >
            </agent>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('public.state')"
          width="60">
          <template scope="scope">
            <span :class="{'stop': !scope.row.enable}">{{ scope.row.enable ? $t('configLazyLoad.qualityCheck.enabled') : $t('configLazyLoad.qualityCheck.disable') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('public.operate')"
        width="94">
          <template scope="scope">
            <el-button
              size="small"
              type="text"
              :class="{'stop': scope.row.enable}"
              @click="handleStop(scope.$index, scope.row)">{{ !scope.row.enable ? $t('configLazyLoad.qualityCheck.enabled') : $t('configLazyLoad.qualityCheck.disable') }}
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              v-if="scope.row.type!=='pass'">
              {{$t('public.edit2')}}
            </el-button>
            <el-button
              type="text"
              size="small"
              v-else
              @click="showPassTempTable(scope.$index, scope.row)">
              {{$t('configLazyLoad.qualityCheck.view')}}
            </el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    name: 'TemplateTable',
    props: {
      pagination: {
        type: Object,
        default: function () {
          return {
            trunPage: 1,
            count: 0
          }
        }
      },
      initTable: {
        type: Array,
        default: function () {
          return [{
            _id: '', // 模板ID
            name: '', // 模板名称
            type: '', // 模板类型
            enable: '', // 状态
            updateUser: '', // 最后操作人
            rowData: '' // 后台返回数据 编辑之后这种结构返回后台
          }]
        }
      }
    },
    data () {
      return {
        showTemp: '',
        trunPage: this.pagination.trunPage
      }
    },
    components: {
      Pagination,
      Agent
    },
    computed: {
      count () {
        return this.pagination.count
      },
      tableData () {
        return JSON.parse(JSON.stringify(this.initTable))
      }
    },
    methods: {
      handleEdit (index, row) {
        this.$emit('getScoring', row)
      },
      trunPages (page) {
        this.trunPage = page
        this.$emit('trunPage', page)
      },
      showPassTempTable (index, row) {
        this.$emit('getPass', row)
      },
      handleStop (index, row) {
        this.$emit('stop', {page: this.trunPage, row})
      },
      changeAddTemp (arg) {
        this.$emit('clickEdit', arg)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .wapper
    display flex
    flex-direction column
  .tool
    border 1px solid #e7e7eb
    border-bottom 0
    display flex
    justify-content space-between
  .el-icon-plus
    color $c-main
  .add-wapper
    line-height 28px
    .el-button
      margin: 0
      padding: 0 8px
  .stop
    color $c-pink
  .el-table .cell >.stop
    color $c-pink
</style>
